<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<title>Example: Logger - Writing Logs (YUI Library)</title>
<link type="text/css" rel="stylesheet" href="../../build/reset/reset.css">
<link type="text/css" rel="stylesheet" href="../../build/fonts/fonts.css">
<link type="text/css" rel="stylesheet" href="../../build/logger/assets/logger.css">
<link type="text/css" rel="stylesheet" href="./css/examples.css">
<link type="text/css" rel="stylesheet" href="../assets/dpSyntaxHighlighter.css" />
<style type="text/css">
.yui-log-container {position:absolute;top:1em;right:1em;}
.yui-log .mytype {background-color:#FF99CC;}
</style>
</head>

<body>
<div id="hd">
    <h1><img src="./img/logo.gif" class="logo" alt="Y!"/><a href="./">Logger Widget</a> :: Writing Logs</h1>
</div>

<div id="bd">
    <!-- Intro -->
    <div id="intro">
        <h3>Writing Logs</h3>
        <p>The following examples demonstrate how to assign
        different categories and sources to your log messages.</p>
    </div>

    <!-- Example: Global -->
    <div class="example">
        <div class="content">
            <h4>Example: Log messages into different categories</h4>
            <p>By default, unsourced log messages get assigned to a "global" bucket.</p>
            <ul id="globals">
            <li><a href="#" class="global info">Log an "info" message.</a></li>
            <li><a href="#" class="global warn">Log a "warn" message.</a></li>
            <li><a href="#" class="global error">Log an "error" message.</a></li>
            <li><a href="#" class="global time">Log a "time" message.</a></li>
            </ul>

            <!-- Sample code begins -->
            <div class="code">
                <h4>Sample Code</h4>

                <textarea name="code" class="JScript" cols="60" rows="1">
YAHOO.log("This is an \"info\" message.", "info"); // or just YAHOO.log("This is an \"info\" message.");
YAHOO.log("This is a \"warn\" message.", "warn");
YAHOO.log("This is an \"error\" message.", "error");
YAHOO.log("This is a \"time\" message.", "time");
                </textarea>
            </div>
            <!-- Code sample ends -->
        </div>
    </div>

    <!-- Example: Sourced -->
    <div class="example">
        <div class="content">
            <h4>Example: Log messages into different categories and assign them
            to a source called <code>myBucket</code></h4>
            <p>You can assign a source to a log message by passing it in as
            the third argument to <code>YAHOO.log()</code>.</p>
            <ul>
            <li><a href="#" class="myBucket info">Log an "info" message.</a></li>
            <li><a href="#" class="myBucket warn">Log a "warn" message.</a></li>
            <li><a href="#" class="myBucket error">Log an "error" message.</a></li>
            <li><a href="#" class="myBucket time">Log a "time" message.</a></li>
            </ul>

            <!-- Sample code begins -->
            <div class="code">
                <h4>Sample Code</h4>

                <textarea name="code" class="JScript" cols="60" rows="1">
YAHOO.log("This is an \"info\" message.", "info", "myBucket");
YAHOO.log("This is a \"warn\" message.", "warn", "myBucket");
YAHOO.log("This is an \"error\" message.", "error", "myBucket");
YAHOO.log("This is a \"time\" message.", "time", "myBucket");
                </textarea>
            </div>
            <!-- Code sample ends -->
        </div>
    </div>

    <!-- Example: Classed -->
    <div class="example">
        <div class="content">
            <h4>Example: Create a LogWriter write log messages from a class
            named <code>MyClass</code></h4>
            <p>If you plan to assign many log messages to the same source (such
            as from a class), it may be easier to write log messages from a
            LogWriter instance.</p>
            <ul>
            <li><a href="#" class="MyClass info">Log an "info" message.</a></li>
            <li><a href="#" class="MyClass warn">Log a "warn" message.</a></li>
            <li><a href="#" class="MyClass error">Log an "error" message.</a></li>
            <li><a href="#" class="MyClass time">Log a "time" message.</a></li>
            </ul>

            <!-- Sample code begins -->
            <div class="code">
                <h4>Sample Code</h4>

                <textarea name="code" class="JScript" cols="60" rows="1">
var myLogWriter = new YAHOO.widget.LogWriter("MyClass");
myLogWriter.log("This is an \"info\" message.", "info"); // or just myLogWriter.log("This is an \"info\" message.");
myLogWriter.log("This is a \"warn\" message.");
myLogWriter.log("This is an \"error\" message.");
myLogWriter.log("This is a \"time\" message.");
                </textarea>
            </div>
            <!-- Code sample ends -->
        </div>
    </div>

</div>

<!-- Libary begins -->
<script type="text/javascript" src="../../build/yahoo/yahoo.js"></script>
<script type="text/javascript" src="../../build/event/event.js"></script>
<script type="text/javascript" src="../../build/dom/dom.js"></script>
<script type="text/javascript" src="../../build/dragdrop/dragdrop.js"></script>
<script type="text/javascript" src="../../build/logger/logger.js"></script>
<!-- Library ends -->

<script type="text/javascript">
var myLogReader = new YAHOO.widget.LogReader();
var myLogWriter = new YAHOO.widget.LogWriter("MyClass");

// Click to log
var clickToLog = function(e) {
    YAHOO.util.Event.stopEvent(e);
    var target = YAHOO.util.Event.getTarget(e);
    var source = (YAHOO.util.Dom.hasClass(target, "MyClass")) ? "MyClass" : null;
    
    if(!source) {
        source = (YAHOO.util.Dom.hasClass(target, "myBucket")) ? "myBucket" : null;
        if(YAHOO.util.Dom.hasClass(target, "info")) {
            YAHOO.log("This is an \"info\" message.", "info", source);
        }
        else if(YAHOO.util.Dom.hasClass(target, "warn")) {
            YAHOO.log("This is a \"warn\" message.", "warn", source);
        }
        else if(YAHOO.util.Dom.hasClass(target, "error")) {
            YAHOO.log("This is an \"error\" message.", "error", source);
        }
        else if(YAHOO.util.Dom.hasClass(target, "time")) {
            YAHOO.log("This is a \"time\" message.", "time", source);
        }
    }
    else {
        if(YAHOO.util.Dom.hasClass(target, "info")) {
            myLogWriter.log("This is an \"info\" message.", "info");
        }
        else if(YAHOO.util.Dom.hasClass(target, "warn")) {
            myLogWriter.log("This is a \"warn\" message.", "warn");
        }
        else if(YAHOO.util.Dom.hasClass(target, "error")) {
            myLogWriter.log("This is an \"error\" message.", "error");
        }
        else if(YAHOO.util.Dom.hasClass(target, "time")) {
            myLogWriter.log("This is a \"time\" message.", "time");
        }

    }
};

YAHOO.util.Event.addListener(YAHOO.util.Dom.get("bd"),"click",clickToLog);
</script>

<script type="text/javascript" src="../assets/dpSyntaxHighlighter.js"></script>
<script type="text/javascript">
dp.SyntaxHighlighter.HighlightAll('code');
</script>

</body>
</html>
